
<template>
  <div class="history-container">
    <div class="tabs">
      <ul class="tab-tilte">
        <li v-for="(itemTit, index) in tabTitle" :key="index" @mouseover="handleMouseOver(index)"
          @mouseout="handleMouseOut(index)" :class="{ active: cur == index }">
          {{ itemTit }}
        </li>
      </ul>
      <div class="indicatorDots">
        <span :class="{ active: cur == i }" v-for="(v, i) in tabTitle" :key="i"></span>
      </div>
      <div class="tab-content">
        <div v-for="(itemCon, index) in tabCon" v-show="cur == index" :key="index">
          <div v-for="(v, i) in itemCon" :key="i" class="content">
            {{ v }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "history",
  data() {
    return {
      timer: null,
      tabTitle: ['分布特征', '变化趋势', '影响因素', '改善建议'],
      tabCon: [
        [
          '南北梯度明显，南部显著高于北部：',
          '高值区集中分布在赣江上游：寻乌县、全南县、龙南县、安远县',
          '低值区主要分布于城市区域：南昌市、安义县、樟树市'
        ],
        [
          '全流域平均NPP在600-750gC/m²之间波动，呈现"先升后降再回升"的波动趋势',
          '2016小幅下降，2017明显回升，2018年约达峰值，2019年回落，2020年回升',
        ],
        [
          '温度：年均温16-19℃，≥10℃积温5000-6000℃',
          '植被覆盖：南部山区年均NDVI 0.75-0.85，城市建成区<0.3',
          '人为活动：南昌市建成区扩张速度3.5%/年，退耕还林使NPP提升30-40%/10年',
        ],
        [
          '赣江流域NPP六年间总体呈缓慢上升趋势，但城市区域改善不明显。',
          '建议采取差异化生态修复策略，重点提升鄱阳湖平原和城市群的植被生产力',
          '同时保护南岭-武夷山生态屏障区的高NPP值。',
        ],
      ],
      cur: 0, //默认选中第一个tab
    }
  },
  mounted() {
    this.getTimer();
  },
  methods: {
    getTimer() {
      this.timer = setInterval(() => {
        this.cur++;
        if (this.cur == this.tabTitle.length) {
          this.cur = 0;
        }
      }, 2000)
    },
    handleMouseOver(index) {
      this.cur = index;
      clearInterval(this.timer);
    },
    handleMouseOut() {
      this.getTimer();
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
};
</script>

<style scoped>
.history-container {
  margin: 10px 10px;
}

.history-container .tabs {
  display: flex;
}

.history-container .tabs .tab-tilte li {
  color: #fff;
  background-color: rgba(36, 196, 255, 0.5);
  text-align: center;
  cursor: pointer;
  font-size: 12px;
  width: 80px;
  height: 30px;
  line-height: 30px;
  margin-bottom: 30px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.history-container .tabs .tab-tilte li.active {
  background: linear-gradient(to right, #1b81bc, 20%, #24c4ff);
  color: #fff;
}

.history-container .tabs .indicatorDots {
  background-color: rgba(36, 196, 255, 0.5);
  width: 2px;
  height: 180px;
  margin: 5px 0 0 25px;
}

.history-container .tabs .indicatorDots span {
  display: block;
  height: 60px;
  margin-left: -5px;
}

.history-container .tabs .indicatorDots span:after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  background: #ddd;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 2px solid #1b81bc;
}

.history-container .tabs .indicatorDots span.active:after {
  background: #24c4ff;
  -webkit-box-shadow: 0 0 10px #1b81bc;
  box-shadow: 0 0 0.125rem #1b81bc;
}

.history-container .tabs .tab-content {
  display: flex;
  align-items: center;
  height: 200px;
  overflow: hidden;
}

.history-container .tabs .tab-content div {
  margin-left: 15px;
  color: #fff;
}

.history-container .tabs .tab-content div .content {
  font-size: 14px;
  line-height: 22px;
  padding: 8px 0;
}
</style>
